import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../widgets/shadow_text.dart';

import '../common/routes.dart';
import '../model/cartoon_model.dart';
import '../utils/utils.dart';

class CartoonBannerWidget extends StatelessWidget {
  final PipeList pipe;

  const CartoonBannerWidget({super.key, required this.pipe});

  @override
  Widget build(BuildContext context) {
    final useNum = Utils.formatNumber(pipe.useNum);
    return GestureDetector(
      onTap: () {
        var pipeId = pipe.id ?? "";
        Get.toNamed(Routes.CHAT, arguments: {"pipeId": pipeId});
      },
      child: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: 15,
            height: 100,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white.withAlpha(20),
                borderRadius: BorderRadius.circular(8.0),
              ),
            ),
          ),
          Positioned(
            left: 10,
            top: 0,
            child: Transform.rotate(
              angle: -3 * (3.1415927 / 180),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(6.0),
                child: CachedNetworkImage(
                  fit: BoxFit.cover,
                  fadeInDuration: const Duration(milliseconds: 100),
                  fadeOutDuration: const Duration(seconds: 0),
                  imageUrl: pipe.cover,
                  width: 70,
                  height: 103,
                ),
              ),
            ),
          ),
          Positioned(
            left: 90,
            top: 30,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ShadowedText(pipe.name, style: const TextStyle(color: Colors.white, fontSize: 15)),
                const Divider(height: 4),
                ShadowedText(pipe.summary, style: const TextStyle(color: Colors.white54, fontSize: 13)),
                const Divider(height: 10),
                ShadowedText("$useNum次互动", style: const TextStyle(color: Colors.white60, fontSize: 14))
              ],
            ),
          )
        ],
      ),
    );
  }
}
